<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装简易Axios</title>
</head>

<body>
    <ul class="list-group">
        <!-- 示例地区 -->
        <li class="list-group-item">东城区</li>
    </ul>
    <script>
        function myAxios(config) {
            const { url, method = 'GET', params, data } = config
            return new Promise((resolve, reject) => {
                let queryString = '';
                // 判断是否使用查询参数
                if (params) {
                    queryString = '?' + new URLSearchParams(params).toString();
                }
                // 创建XHR对象
                const xhr = new XMLHttpRequest()
                // 发送请求的方法和地址
                xhr.open(method, url + queryString)
                // 请求发送完成后的回调函数
                xhr.addEventListener('loadend', () => {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 成功
                        resolve(JSON.parse(xhr.response))
                    } else {
                        // 失败
                        reject(new Error(xhr.response))
                    }
                })
                // 判断是否在请求体中传参
                if (data) {
                    // 设置请求头
                    xhr.setRequestHeader('Content-Type', 'application/json')
                    // 发送请求
                    xhr.send(JSON.stringify(data))
                } else {
                    // 发送请求
                    xhr.send()
                }
            })
        }

        myAxios({
            url: 'http://hmajax.itheima.net/api/area',
            params: {
                pname: '湖北省',
                cname: '武汉市'
            }
        }).then((result) => {
            console.log(result);
            document.querySelector('.list-group').innerHTML = result.list.map((item) => {
                return `<li class="list-group-item">${item}</li>`
            }).join('')
        }).catch((error) => { console.log(error.message) }
        )
    </script>
</body>

</html>